<style>
.product_category{
	width:200px;
	float:left;
	margin-right:20px;
	text-align:center;
}
.product_list{
	overflow:hidden;
	padding-bottom:150px;
}
.categories{
	border:1px solid #ccc;
	margin-top:20px;
	margin-bottom:40px;
}
.category_item{
	padding:12px;
	cursor:pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background:#fff;
	font-size:16px;
}
.category_item:hover{
	background: linear-gradient(#f5f5f5, #f0f0f0);
}
.category_item.active{
	background: linear-gradient(#f0f0f0, #eaeaea);
}
.grid_table{
	margin-top:0;
}
.product_cover{
	width:70px;
	height:70px;
}
.set_category label{
	display:block;
	padding:6px 3px;
}
.set_category label > *{
	line-height:1em;
	display:inline-block;
	vertical-align:middle;
	padding:0;
	margin:0;
}
.category_item:before,.icon-del:before{
	opacity: 0;
}
.category_item:hover:before, .category_item:hover .icon-del:before, .category_item:hover .icon-edit{
	opacity:0.8;
}
.icon-drag:before{
	float:left;
	cursor:move;
}
.icon-del{
	float:right;
	color:red;
}
.icon-edit{
	float:left;
	margin-left:10px;
	opacity:0;
}
</style>

<!--分类列表-->
<div class="product_category">
	<button [disabled]="!boxId" style="width:100%;padding:10px;" (click)="addCategory();">添加分类</button>
	<div class="categories">
		<div class="category_item category_header" (click)="loadProduct();"  [ngClass]="{active:!cateId}">全部商品</div>
		<div class="category_item icon-drag" *ngFor="let c of categories" (click)="loadProduct(c);" [ngClass]="{active:cateId==c.type_id}" title="拖动排序">
			<div class="icon-edit" (click)="editCategory($event, c);" title="重命名分类"></div>
			<span>{{c.name}}</span>
			<div class="icon-del" (click)="deleteCategory($event, c);" title="删除分类"></div>
		</div>
	</div>
</div>

<!--商品列表-->
<div class="product_list">
	<table class="grid_table order_table">
		<tr>
			<th width="90">商品图片</th>
			<th>商品名称</th>
			<th width="120">所属分类</th>
			<th width="160">操作</th>
		</tr>
		<tr *ngFor="let p of products">
			<td><img class="product_cover" src="{{p.image[0].img_small}}"/></td>
			<td>{{p.name}}</td>
			<td><div *ngFor="let t of p.typeInfo">{{t.name}}</div></td>
			<td>
				<button class="tip">
					<span>设置分类</span>
					<div class="set_category tip_content">
						<div *ngFor="let c of categories">
							<label>
								<input name="cate" type="checkbox" [val]="c" [vals]="p.typeInfo" (change)="selectType(p, c, $event);"/>
								<span>{{c.name}}</span>
							</label>
						</div>
					</div>
				</button>
			</td>
		</tr>
	</table>
</div>